/**
 * 我的
 *    主页面
 */

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  Dimensions,
  TouchableOpacity,
  ActivityIndicator,
} from 'react-native';
import {getMineIndex} from '../../api/index';
import {setHomeData, setToastMsg} from '../../actions/index';
import {MineImg, CommonImg} from '../../images/index';
import {connect} from 'react-redux';
const {width} = Dimensions.get('window');
class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      isOk: false,
      result: {},
    };
  }

  async getInfo() {
    let result = await getMineIndex();
    // this.setState({isLoading: false});
    //如果头像为空的，设置默认值
    try {
      if (result.data.portraitkey === '' || result.data.portraitkey === null) {
        result.data.portraitkey =
          'https://hgbc-1.oss-cn-beijing.aliyuncs.com/icon/9825bc315c6034a89efd4098c413495409237688.jpg';
      }
    } catch (e) {}

    this.setState({
      result: result.data,
    });

    const results = this.state.result;
    this.props.setHomeData({
      token_count: results.tokens,
      img: results.portraitkey,
    });
    const markUrl = results.isCompany === 1 ? MineImg.Company : MineImg.Person;
    const nav = results.isCompany ? 'CompanyInfo' : 'UserInfo';
    let propertyImg = MineImg.Common;
    switch (results.role) {
      case '董事':
        propertyImg = MineImg.Director;
        break;
      case '执行董事':
        propertyImg = MineImg.ExDirector;
        break;
      default:
        propertyImg = MineImg.Common;
        break;
    }
    this.setState({
      markUrl: markUrl,
      nav: nav,
      propertyImg: propertyImg,
    });
  }
  componentDidMount(): void {
    this.getInfo();
  }

  render() {
    // if (this.state.isLoading) {
    //   return <View />;
    // }
    return (
      <ScrollView style={styles.root}>
        <StatusBar
          backgroundColor={'#ffffff'} //状态栏背景颜色
          barStyle={'dark-content'} //状态栏样式（黑字）
        />
        <View style={styles.topContainer}>
          <View style={styles.topTop}>
            <Image source={{uri: this.props.img}} style={styles.topTopIcon} />
            <View style={styles.topTopContent}>
              <Text style={{fontSize: 15}}>{this.state.result.nickname}</Text>
              <View style={{flexDirection: 'row'}}>
                <Image
                  source={this.state.propertyImg}
                  style={{width: 55, height: 19, marginTop: 6, marginLeft: 5}}
                />
                <Image
                  source={this.state.markUrl}
                  style={{width: 55, height: 19, marginTop: 6, marginLeft: 5}}
                />
              </View>
            </View>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.navigate(this.state.nav, {
                  callback: img => {
                    this.state.result.portraitkey = img;
                  },
                  isCompany: this.state.result.isCompany,
                });
              }}>
              <Image
                source={CommonImg.Arrow}
                style={{marginTop: 26, marginLeft: 85, width: 8, height: 14}}
              />
            </TouchableOpacity>
          </View>
          <View style={styles.topMid}>
            <View style={{marginTop: 12, marginLeft: 7}}>
              <View
                style={{flexDirection: 'row', marginTop: 10, marginLeft: 32}}>
                <Image
                  source={MineImg.Credit}
                  style={{width: 19, height: 19}}
                />
                <Text style={{color: '#FEFEFE', fontSize: 13, marginLeft: 10}}>
                  碱基
                </Text>
              </View>
              <Text
                style={{
                  fontSize: 13,
                  color: '#FEFEFE',
                  marginLeft: 10,
                  marginTop: 10,
                  width: 100,
                  textAlign: 'center',
                }}>
                {this.props.tokens.toFixed(2)}
              </Text>
            </View>
            <View
              style={{
                width: 1,
                height: 56,
                backgroundColor: '#7ECEF4',
                marginLeft: 20,
                marginTop: 15,
              }}
            />
            <View style={{flexDirection: 'row', marginLeft: 20, marginTop: 35}}>
              <TouchableOpacity
                style={{flexDirection: 'row'}}
                onPress={() => {
                  this.state.result.tiStart === 1
                    ? this.props.navigation.navigate('Withdrawal')
                    : this.props.setToastMsg('提现功能未开启');
                }}>
                <Image
                  source={MineImg.Withdraw}
                  style={{width: 11, height: 11, marginTop: 2}}
                />
                <Text style={{fontSize: 12, color: '#FEFEFE', marginLeft: 2}}>
                  提现
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{flexDirection: 'row', marginLeft: 18}}
                onPress={() => {
                  this.state.result.sendStart === 1
                    ? this.props.navigation.navigate('Giving')
                    : this.props.setToastMsg('转赠功能未开启');
                }}>
                <Image
                  source={MineImg.Trade}
                  style={{width: 11, height: 11, marginTop: 2}}
                />
                <Text style={{fontSize: 12, color: '#FEFEFE', marginLeft: 2}}>
                  转赠
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{flexDirection: 'row', marginLeft: 18}}
                onPress={() => {
                  this.state.result.chongStart === 1
                    ? this.props.navigation.navigate('ChargeAddress', {
                        portraitkey: this.state.result.portraitkey,
                      })
                    : this.props.setToastMsg('充值功能未开启');
                }}>
                <Image
                  source={MineImg.Charge}
                  style={{width: 11, height: 11, marginTop: 2}}
                />
                <Text style={{fontSize: 12, color: '#FEFEFE', marginLeft: 2}}>
                  充值
                </Text>
              </TouchableOpacity>
            </View>
          </View>
          <View style={styles.topBottom}>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.navigate('Assets');
              }}>
              <View
                style={{
                  borderColor: '#4FB1F8',
                  borderWidth: 1,
                  width: 138,
                  height: 30,
                  marginLeft: 18,
                  marginTop: 25,
                  justifyContent: 'center',
                }}>
                <Text style={{fontSize: 14, color: '#4FB1F8', marginLeft: 40}}>
                  健康档案
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.navigate('CaseBook');
              }}
              style={{
                borderWidth: 1,
                borderColor: '#F8944A',
                width: 138,
                height: 30,
                marginLeft: 18,
                marginTop: 25,
                justifyContent: 'center',
              }}>
              <Text style={{fontSize: 14, color: '#F8944A', marginLeft: 35}}>
                爱心病历本
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.bottomContainer}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('Message');
            }}>
            <View style={styles.bottomItem}>
              <Image source={MineImg.Message} style={styles.bottomIcon} />
              <Text style={styles.bottomText}>消息中心</Text>
              <Image source={CommonImg.Arrow} style={styles.bottomArrow} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('Know');
            }}>
            <View style={styles.bottomItem}>
              <Image source={MineImg.Universal} style={styles.bottomIcon} />
              <Text style={styles.bottomText}>认识星球</Text>
              <Image source={CommonImg.Arrow} style={styles.bottomArrow} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('Feedback');
            }}>
            <View style={styles.bottomItem}>
              <Image source={MineImg.Question} style={styles.bottomIcon} />
              <Text style={styles.bottomText}>问题反馈</Text>
              <Image source={CommonImg.Arrow} style={styles.bottomArrow} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('JoinUs');
            }}>
            <View style={styles.bottomItem}>
              <Image source={MineImg.Star} style={styles.bottomIcon} />
              <Text style={styles.bottomText}>关注我们</Text>
              <Image source={CommonImg.Arrow} style={styles.bottomArrow} />
            </View>
          </TouchableOpacity>
          <View style={{height: 40}} />
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('Settings');
            }}>
            <View style={styles.bottomItem}>
              <Image source={MineImg.Settings} style={styles.bottomIcon} />
              <Text style={styles.bottomText}>账户设置</Text>
              <Image source={CommonImg.Arrow} style={styles.bottomArrow} />
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }
}
export default connect(
  state => ({tokens: state.home.token_count, img: state.home.img}),
  dispatch => ({
    setHomeData: data => dispatch(setHomeData(data)),
    setToastMsg: text => dispatch(setToastMsg(text)),
  }),
)(Mine);
const styles = StyleSheet.create({
  root: {
    backgroundColor: '#F3F7FA',
  },
  topContainer: {
    width: 375 - 30,
    height: 260,
    marginLeft: 15,
    marginTop: 15,
    borderRadius: 6,
    elevation: 10,
    backgroundColor: '#ffffff',
  },
  bottomContainer: {
    marginTop: 20,
    width: 375 - 30,
    marginLeft: 15,
    borderRadius: 6,
    elevation: 10,
    backgroundColor: '#ffffff',
    height: 280,
    marginBottom: 30,
  },
  bottomItem: {
    flexDirection: 'row',
    marginLeft: 20,
    marginTop: 20,
  },
  bottomArrow: {
    marginLeft: 190,
    marginTop: 5,
    width: 8,
    height: 14,
  },
  bottomText: {
    marginLeft: 15,
    marginTop: 3,
    fontSize: 15,
    color: '#333333',
  },
  bottomIcon: {
    width: 25,
    height: 25,
  },
  topTop: {
    flexDirection: 'row',
    marginTop: 10,
    marginLeft: 10,
  },
  topMid: {
    width: 375 - 40,
    marginLeft: 5,
    marginTop: 30,
    backgroundColor: '#3A91EE',
    flexDirection: 'row',
    borderRadius: 5,
    height: 85,
  },
  topBottom: {
    flexDirection: 'row',
  },
  topTopIcon: {
    width: 50,
    height: 50,
    marginLeft: 20,
    marginTop: 10,
    borderRadius: 25,
  },
  topTopContent: {
    marginLeft: 15,
    marginTop: 12,
  },
  blankHeight: {
    height: 20,
  },
});
